import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import querystring from 'querystring';
import { routerRedux, Route } from 'dva/router';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
  Spin,
  message,
} from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import ImageUploader from '../../../components/Falcon/Attachment/ImageUploader';
import AttachmenTable from '../../../components/Falcon/Attachment/AttachmentTable';
import ApplyOrderDisplayer from '../../../components/Falcon/ApplyOrderDisplayer';
import nopictures from '../../../assets/nopictures3.svg';
import styles from './style.less';
import ImageDisplayer from '../../../components/Falcon/Attachment/ImageDisplayer';
import { solo } from '../../../common/solo';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const Option = Select.Option;

const formItemLayout = {
  labelCol: {
    span: 24,
  },
  wrapperCol: {
    span: 24,
  },
};

const formItemLayoutOfHorizon = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk, apply }) => ({
  risk,
  apply,
}))
@Form.create()
export default class PickCarDetail extends PureComponent {
  state = {
    projectId: '',
    taskId: '',
    assetGpsData: [],
    data: [
      'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
      'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
    ],
  };
  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      projectId: params.id,
      taskId: params.taskId,
    });
    dispatch({
      type: 'apply/getPickCar',
      payload: {
        projectId: params.id,
      },
      callback: () => {
        const { apply } = this.props;
        const { pickCarDetails } = apply;
        const { pickCar } = pickCarDetails;
        pickCar &&
          this.setState({
            assetGpsData: pickCar.GPS,
          });
      },
    });

    window.addEventListener('resize', this.resizeFooterToolbar);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeFooterToolbar);
  }

  handlePickCarDetailSubmit = () => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        let result = '';
        if (values.resultCode) {
          if (values.resultCode == 1) {
            result = '通过';
          } else if (values.resultCode == 2) {
            result = '驳回';
          } else if (values.resultCode == 3) {
            result = '拒绝';
          }
        }
        dispatch({
          type: 'risk/pickCarVerify',
          payload: {
            projectId: this.state.projectId,
            taskId: this.state.taskId,
            result: result,
            resultCode: values.resultCode,
            content: values.content,
          },
          callback: () => {
            const { risk: { riskResult } } = this.props;
            if (riskResult.code == '200') {
              message.success('提交成功');
              dispatch(routerRedux.push(`/risk/pickCarList`));
            } else {
              message.error(riskResult.message);
            }
          },
        });
      }
    });
  };

  calcAttachmentData = () => {
    const { projectId } = this.state;
    const projectInfo = {
      projectId,
    };
    // const attachmentData =
    // [
    //   { key: '1', name: '提车照片', maxCount: 10, files: pickCarDetails && pickCarDetails.attachs && [...pickCarDetails.attachs.pickCar] },
    //   { key: '2', name: '行驶证', maxCount: 1, files: pickCarDetails && pickCarDetails.attachs && [...pickCarDetails.attachs.driveLicenseImg] },
    //   { key: '3', name: '合格证', maxCount: 1, files: pickCarDetails && pickCarDetails.attachs && [...pickCarDetails.attachs.carQualified] },
    //   { key: '4', name: '登记证', maxCount: 1, files: pickCarDetails && pickCarDetails.attachs && [...pickCarDetails.attachs.carRegister] },
    //   { key: '5', name: '其他', maxCount: 10, files: pickCarDetails && pickCarDetails.attachs && [...pickCarDetails.attachs.otherImg] },
    // ];

    const attachmentData = [
      {
        key: '1',
        name: '提车照片',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'pickCar',
        attachKind: '1620',
        maxCount: 10,
        files: [],
      },
      {
        key: '2',
        name: '行驶证',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'driveLicenseImg',
        attachKind: '1680',
        maxCount: 2,
        files: [],
      },
      {
        key: '3',
        name: '合格证',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'carQualified',
        attachKind: '1670',
        maxCount: 1,
        files: [],
      },
      {
        key: '4',
        name: '登记证',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'carRegister',
        attachKind: '1660',
        maxCount: 1,
        files: [],
      },
      {
        key: '5',
        name: '其他',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'otherImg',
        attachKind: '1690',
        maxCount: 10,
        files: [],
      },
    ];
    const { apply: { pickCarDetails } } = this.props;
    const { attachs } = pickCarDetails;

    return attachmentData.map((attachmentMetaInfo, index) => {
      const { fieldName } = attachmentMetaInfo;
      const imageKeyList = attachs[fieldName];
      if (!imageKeyList) {
        return attachmentMetaInfo;
      }
      const imageInfoList = imageKeyList.map(key => {
        return {
          key,
          url: `${solo.imgShow}${key}`,
          status: 'done',
          uid: key,
          name: key,
        };
      });
      attachmentMetaInfo.files = imageInfoList;
      return attachmentMetaInfo;
    });
  };

  render() {
    const { risk: { riskLoading } } = this.props;
    const { apply: { pickCarDetails, applyLoading } } = this.props;
    const { getFieldDecorator } = this.props.form;

    return (
      <PageHeaderLayout title="提车审核">
        {
          // JSON.stringify(pickCarDetails)
        }
        {applyLoading ? (
          <div className={styles.spinContainer}>
            <Spin size="large" />
          </div>
        ) : (
          pickCarDetails && (
            <div>
              <Card title="资产信息">
                <Form>
                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem label="车型" {...formItemLayout}>
                        {pickCarDetails.asset.carType}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label="厂商指导价" {...formItemLayout}>
                        {pickCarDetails.asset.msrp}
                      </FormItem>
                    </Col>

                    <Col span={8}>
                      <FormItem label="经销商" {...formItemLayout}>
                        {getFieldDecorator('dealerName', {
                          initialValue: pickCarDetails.asset.dealerName,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                  </Row>

                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem label="经销商账号" {...formItemLayout}>
                        {getFieldDecorator('bankAccount', {
                          initialValue: pickCarDetails.asset.bankAccount,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label="经销商报价" {...formItemLayout}>
                        {getFieldDecorator('dealerPrice', {
                          initialValue: pickCarDetails.asset.dealerPrice,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </Card>
              <Card title="提车情况" style={{ marginTop: '16px' }}>
                <Form>
                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem label="车牌号" {...formItemLayout}>
                        {getFieldDecorator('licensePlate', {
                          initialValue: pickCarDetails.pickCar.licensePlate,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label="行驶证号码" {...formItemLayout}>
                        {getFieldDecorator('licenseDrive', {
                          initialValue: pickCarDetails.pickCar.licenseDrive,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>

                    <Col span={8}>
                      <FormItem label="车辆合格证编号" {...formItemLayout}>
                        {getFieldDecorator('licenseCar', {
                          initialValue: pickCarDetails.pickCar.licenseCar,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                  </Row>

                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem label="车架号" {...formItemLayout}>
                        {getFieldDecorator('carFrame', {
                          initialValue: pickCarDetails.asset.carFrame,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label="车辆登记证编号" {...formItemLayout}>
                        {getFieldDecorator('licenseRegister', {
                          initialValue: pickCarDetails.pickCar.licenseRegister,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                    <Col span={8} />
                  </Row>
                  {/* <FormItem label="GPS编号" {...formItemLayout}>
                      <Row gutter={24}>
                        <Col span={6}>
                          <Input
                            value={this.state.assetGpsData[0]}
                            onChange={this.handleAssetGPSValue0}
                            disabled
                          />
                        </Col>
                        <Col span={6}>
                          <Input
                            value={this.state.assetGpsData[1]}
                            onChange={this.handleAssetGPSValue1}
                            disabled
                          />
                        </Col>
                        <Col span={6}>
                          <Input
                            value={this.state.assetGpsData[2]}
                            onChange={this.handleAssetGPSValue2}
                            disabled
                          />
                        </Col>
                        <Col span={6}>
                          <Input
                            value={this.state.assetGpsData[3]}
                            onChange={this.handleAssetGPSValue3}
                            disabled
                          />
                        </Col>
                      </Row>
                    </FormItem> */}
                </Form>
              </Card>

              <Card title="发票信息" style={{ marginTop: '16px' }}>
                <Form>
                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem label="上传发票" {...formItemLayout}>
                        {pickCarDetails.invoice.attachs.length == 0 ? (
                          <img src={nopictures} style={{ width: '20%', height: '20%' }} />
                        ) : (
                          pickCarDetails &&
                          pickCarDetails.invoice.attachs.map(item => {
                            return (
                              <Col span={3}>
                                <ImageDisplayer src={solo.imgShow + item} />
                              </Col>
                            );
                          })
                        )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label="发票编号" {...formItemLayout}>
                        {getFieldDecorator('invoiceNumber', {
                          initialValue: pickCarDetails.invoice.invoiceNumber,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label="开票金额" {...formItemLayout}>
                        {getFieldDecorator('invoicePrice', {
                          initialValue: pickCarDetails.invoice.invoicePrice,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>

                    <Col span={8}>
                      <FormItem label="开票单位" {...formItemLayout}>
                        {getFieldDecorator('invoiceCompany', {
                          initialValue: pickCarDetails.invoice.invoiceCompany,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </Card>

              <Card title="保险信息" style={{ marginTop: '16px' }}>
                <Form>
                  <Row gutter={16}>
                    <Col span={8}>
                      <FormItem label="上传保单" {...formItemLayout}>
                        {pickCarDetails.insurance.attachs.length == 0 ? (
                          <img src={nopictures} style={{ width: '20%', height: '20%' }} />
                        ) : (
                          pickCarDetails &&
                          pickCarDetails.insurance.attachs.map(item => {
                            return (
                              <Col span={3}>
                                <ImageDisplayer src={solo.imgShow + item} />
                              </Col>
                            );
                          })
                        )}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label="保单编号" {...formItemLayout}>
                        {getFieldDecorator('invoiceNumber1', {
                          initialValue: pickCarDetails.insurance.invoiceNumber,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label="保单金额" {...formItemLayout}>
                        {getFieldDecorator('invoicePrice1', {
                          initialValue: pickCarDetails.insurance.invoicePrice,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem label="开票单位" {...formItemLayout}>
                        {getFieldDecorator('invoiceCompany1', {
                          initialValue: pickCarDetails.insurance.invoiceCompany,
                        })(<Input disabled />)}
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </Card>
              {/* {JSON.stringify(attachmentData)} */}
              <Card title="附件管理" style={{ marginTop: '16px' }}>
                <AttachmenTable applyDisabled={true} data={this.calcAttachmentData()} />
              </Card>

              <Card className={styles.preCheckFormCard}>
                <Form className={styles.preCheckForm}>
                  <FormItem label="初审结果" {...formItemLayoutOfHorizon}>
                    {getFieldDecorator('resultCode', {
                      initialValue: pickCarDetails.approval.result,
                    })(
                      <RadioGroup>
                        <Radio value={1}>通过</Radio>
                        <Radio value={2}>驳回</Radio>
                        {/* <Radio value={3}>关注</Radio> */}
                      </RadioGroup>
                    )}
                  </FormItem>
                  <FormItem label="初审意见" {...formItemLayoutOfHorizon}>
                    {getFieldDecorator('content', {
                      initialValue: pickCarDetails.approval.content,
                    })(<TextArea rows={4} placeholder="请输入意见说明" />)}
                  </FormItem>
                  <FormItem
                    wrapperCol={{
                      xs: { span: 24, offset: 0 },
                      sm: {
                        span: formItemLayoutOfHorizon.wrapperCol.span,
                        offset: formItemLayoutOfHorizon.labelCol.span,
                      },
                    }}
                    label=""
                  >
                    <Button
                      type="primary"
                      onClick={this.handlePickCarDetailSubmit}
                      loading={riskLoading}
                    >
                      提交
                    </Button>
                  </FormItem>
                </Form>
              </Card>
            </div>
          )
        )}
      </PageHeaderLayout>
    );
  }
}
